<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>{{ count }} -- {{getNum}}</h1>
        <button @click="addCount"> 点击增加 </button>
    </div>
    <hr>
    <!-- <div id='bpp'>
        <h1>{{ count }}</h1>
        <button @click="addCount"> 点击增加 </button>
    </div> -->
</body>
<script>

    /*
        mixin 是可以将公用的属性和方法放在一个混入中
        1. 组件自身的数据优先级会高于混入
        2. 对于函数而言，组件自身的函数优先级会高于混入
        3. 对于生命周期而言，混入的会高于自身的
        4. 对于计算属性而言自身优先级高于混入

        react 中 高阶组件
    */
    const myMixin = {
        data () {
            return {
                count: 100
            }
        },
        methods: {
            addCount () {
                this.count++
            }
        },
        computed: {
            getNum () {
                console.log('混入执行了');
                return this.count
            }
        },
        mounted () {
            console.log('我发誓明天一定不会在熬夜了');
        },
    }


    const app = Vue.createApp({
        data () {
            return {
                count: 0
            }
        },
        methods: {
            addCount () {
                this.count += 2
            }
        },
        // computed: {
        //     getNum () {
        //         console.log('自身执行了');
        //         return this.count
        //     }
        // },
        mounted () {
            console.log('如果再熬夜，那我就下次再发誓。');
        },
        mixins: [myMixin]
    })
    app.mount('#app')




    // const bpp = Vue.createApp({
    //     data () {
    //         return {
    //             // count: 0
    //         }
    //     },
    //     methods: {
    //         // addCount () {
    //         //     this.count++
    //         // }
    //     },
    //     mixins: [myMixin]
    // })
    // bpp.mount('#bpp')

</script>

</html>